<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>商品列表页面</title>
		<!--商品列表样式表-->
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
	.shopCart{
		
		position: fixed;
		top: 20px;
		left: 400px;
	}
	.shopCart .cartNum{
		display: block;
		height: 20px;
		width: 20px;
		border-radius: 10px;
		background:rgba(45,245,245,0.5);
		text-align: center;
		position: absolute;
		top: 3px;
		right: 3px;
	}
</style>
</head>

	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-3 product">
					<p><img src="../../img/jiubei.png" class="img-responsive"/></p>
					<p>anskkksj你看见，圣诞快乐撒即可得尽快带我去加快点叫什么</p>
					<p>price：<em>123:45</em></p>
					<p><button class="btn btn-primary btn-small addCart">加入购物车</button></p>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="shopCart">
					<img src="../../img/che.png" class="img-responsive"/>
					<span class="cartNum">
						0
					</span>
				</div>
			</div>
		</div>
		<script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>

	    <script type="text/javascript">
	    	$(function(){
	    		var cartNum=0;
	    		$('.addCart').on('click',function(){
	    			
	    			//购物车
	    			var shopCart=$(".shopCart")
	    			//alert('选中了')
	    			var addImg=$(this).parent().parent(".product").find("img").eq(0);
	    			//克隆图片
	    			var cloneImg=addImg.clone();
	    			//console.log(cloneImg);
	    			
	    			cloneImg.css({
	    				"width":"200px",
	    				"height":"200px",
	    				"position":"absolute",
	    				"top":addImg.offset().top,
	    				'left':addImg.offset().left,
	    				"opacity":".5",
	    				
	    			}).appendTo($('body')).animate({
	    				"width":"50",
	    				"height":"50",
	    				"top":shopCart.offset().top,
	    				'left':shopCart.offset().left,
	    				
	    			},2000,function(){
	    				cloneImg.animate({
	    					"width":"0",
	    					"height":"0",
	    				},function(){
	    					$('.cartNum').html(++cartNum);
	    					$(this).detach();
	    				});
	    			});
	    		});
	    	});
	    </script>
	</body>

</html>